<template>
  <li
    class="dropdown-item"
    @mouseenter="open = true"
    @mouseleave="open = false"
    @focusin="open = true"
    @focusout="open = false"
  >
    <a class="flex items-center px-4 py-3 ml-2" href="#" @click.prevent>
      <span>{{ title }}</span>
      <svg
        class="w-3 h-3 fill-current cursor-pointer ml-1 shrink-0"
        viewBox="0 0 12 12"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g transform="rotate(-90, 6, 6)">
          <path
            d="M10.28 4.305L5.989 8.598 1.695 4.305A1 1 0 00.28 5.72l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z"
          />
        </g>
      </svg>
    </a>
    <transition
      enter-active-class="transition ease-out duration-200 transform"
      enter-from-class="opacity-0 -translate-y-2"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition ease-out duration-200"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <ul v-if="open" class="dropdown-menu text-white" @click.stop>
        <li v-for="(item, index) in items" :key="index" class="dropdown-item" :class="{ 'dropdown-item-active': route.path === item.toUrl }">
          <a class="flex items-center px-4 py-3 ml-2 whitespace-nowrap" :href="item.toUrl">
            {{ item.title }}
          </a>
        </li>
      </ul>
    </transition>
  </li>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const open = ref(false)

defineProps({
  items: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: null,
    required: true
  }
})
</script>

<style scoped>
li:hover > a {
  color: #c00000;
}

.dropdown-menu {
  position: absolute;
  background-color: #ffffff;
  width: auto;
  display: block;
  top: 0;
  left: 100%;
}

.dropdown-item {
  position: relative;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: normal;
  color: #54595f;
}

.dropdown-item-active {
  color: #c00000;
}
</style>
